<extend name="./Application/Home/View/Layouts/application.html"/>

<block name="content">
    <h3 style="width: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-weight: normal;
    background-color: #c06090;margin-top: 10px;">我的购物车</h3>

    <form>
        <section class="cart">

            <volist name="carts" id="cart">
                <dl class="good" data-id="{{$cart.id}}">
                    <dt><img class="img-responsive" src="{{$cart.product.thumb}}" alt="产品图片">
                    </dt>
                    <dd class="dd">
                        <ul>
                            <li>{{$cart.product.name}}</li>
                            <li><span>¥</span> <span class="price">{{$cart.product.price}}元</span></li>
                            <li>
                                <div class="btn-group">
                                    <span class="sub">－</span>
                                    <input type="text" value="{{$cart.num}}" name="num" class="num">
                                    <span class="add">＋</span>
                                </div>
                                <a class="btn-cart-omit" href="javascript:void(0);">移除</a>
                            </li>
                        </ul>
                    </dd>
                </dl>
            </volist>

            <p id="total">总金额：<span>¥</span> <span id="total-price"> </span></p>

            <a href="{{:U('Order/index')}}"><input class="submit" type="button" value="我要购买"></a>
        </section>
    </form>

    <br>
    <br>
</block>
<block name="js">
    <script>
        $(function () {
            //页面刷新增加数量
//            $(".add").click(function () {
//                var id = $(this).parents('dl').data('id');
//                $.post("{{:U('ajax_add')}}", {id: id}, function () {
//                    window.location.reload();
//                })
//            });

            //增加数量
            $(".add").click(function () {
                var t = $(this).parent().find('input[class*=num]');
                t.val(parseInt(t.val()) + 1);

                var id = $(this).parents('dl').data('id');
                $.post("{{:U('ajax_add')}}", {id: id}, function () {

                });
                setTotal();
            })

            //减少数量
            $(".sub").click(function () {
                var t = $(this).parent().find("input[class*=num]");
                t.val(parseInt(t.val()) - 1);
                if (parseInt(t.val()) < 1) {
                    t.val(1);
                    return false;
                }

                var id = $(this).parents('dl').data('id');
                $.post("{{:U('ajax_sub')}}", {id: id}, function () {

                });
                setTotal();
            });

            //改变数量
            $(".num").change(function () {
                var info = {
                    id : $(this).parents('dl').data('id'),
                    num : $(this).val()
                };
                if(info.num < 1){
                    info.num = 1;
                }
                $.post("{{:U('ajax_num')}}", info, function () {
                    window.location.reload();
                })
            })

            //统计价格
            function setTotal() {
                var sum = 0;
                $(".good").each(function () {
                    var num = parseInt($(this).find("input[class*=num]").val());
                    var price = parseFloat($(this).find("span[class*=price]").text());
                    sum += num * price;
                })
                $("#total-price").html(sum.toFixed(2));
            }
            setTotal();

            //移除商品
            $('.btn-cart-omit').click(function () {
                var id = $(this).parents('dl').data('id');
                var _this = $(this);
                $.post("{{:U('ajax_delete')}}", {id: id}, function () {
                    _this.parents('dl').fadeOut(400);
                    window.location.reload();
                })
                return false;
            })

        })
    </script>
</block>
